<template>
    <van-row>
        <div :id="chartid" style="width:100%;height:350px;padding 10px 0px"></div>
    </van-row>
</template>

<script>
const echarts = require('echarts')
export default {
  name: 'AnalysisPieChart',
  props: ['chartid', 'title'],
  data () {
    return {
      echarts: null,
      options: null,
      chartData: []
    }
  },
  mounted () {
    this.echarts = echarts.init(document.getElementById(this.chartid))
    this.options = {
      title: {
        text: this.title
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            show: true,
            formatter: '{b} : {c} ({d}%)'
          }
        }
      ]
    }
  },
  methods: {
    renderData (d) {
      console.log(d)
      this.chartData = d
      this.options.series[0].data = []
      if (this.chartData.length > 0) {
        for (let i = 0; i < this.chartData.length; i++) {
          let dataItem = {}
          dataItem.name = this.chartData[i].field
          dataItem.value = this.chartData[i].count
          this.options.series[0].data[i] = dataItem
        }
        this.echarts.setOption(this.options)
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
